{extend name="index_layout"/}
{block name="main"}
<style> .layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}</style>
<div class="layui-card layer-popup">
    <div class="layui-card-body">
        <div class="admin-main layui-anim layui-anim-upbit">
            <blockquote class="layui-elem-quote">
                1、控制器/方法 例如 wechat/index 或者 admin/wechat/index 或者 admin/wechat.wechat/index
            </blockquote>
            <form class="layui-form layui-form-pane" lay-filter="form">
                <div class="layui-form-item">
                    <label class="layui-form-label">父级</label>
                    <div class="layui-input-inline">
                        <select name="pid" lay-verify="required" lay-filter="pid">
                            <option value="0">默认顶级</option>
                            {volist name="ruleList" id="vo"}
                            <option value="{$vo.id}" {if $rule and $rule['id']==$vo.id}selected
                            {/if}>{$vo.lefthtml}{$vo.title}</option>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="required" placeholder="{:lang('pleaseEnter')}权限名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">控制器/方法</label>
                    <div class="layui-input-inline">
                        <input type="text" name="href" lay-verify="required" placeholder="{:lang('pleaseEnter')}控制器/方法" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="icon" id="iconPicker" lay-filter="iconPicker" class="hide">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标颜色</label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="color" value="" id="icon-colorpicker-all-input">
                        <div id="icon-colorpicker-color"></div>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">菜单状态</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="menu_status" lay-filter="menu_status" checked value="1" title="开启">
                        <input type="radio" name="menu_status" lay-filter="menu_status" value="0" title="关闭">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="sort" value="50" placeholder="{:lang('pleaseEnter')}排序编号" class="layui-input">
                        <input type="hidden" name="id">
                    </div>
                </div>

                <div class="layui-form-item layer-footer">
                    <div>
                        <input type="hidden" name="id"  >
                        <button type="button" class="layui-btn" lay-submit="" lay-filter="submit"><i class="layui-icon layui-icon-form"></i> {:lang('submit')}</button>
                        <button type="reset" class="layui-btn layui-btn-primary"> <i class="layui-icon layui-icon-delete"></i>{:lang('reset')}</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    layui.use(['iconPicker', 'form', 'layer','yznForm','colorpicker'], function() {
        var iconPicker = layui.iconPicker,
            form = layui.form,
            colorpicker = layui.colorpicker,
            layer = layui.layer,
            $ = layui.$,
            yznForm = layui.yznForm;

        yznForm.listen();
        iconPicker.render({
            elem: '#iconPicker4',
            type: 'fontClass'
        });

        var info  = {:json_encode($info)};
        var url = "{:url('ruleAdd')}";
        var icon = '';
        if(info){
            form.val('form',info);
            url = "{:url('edit')}";
            icon= info.icon;
        }

        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                //console.log(data);
            },
            // 渲染成功后的回调
            success: function(d) {
                //console.log(d);
            }
        });
        //开启全功能
        colorpicker.render({
            elem: '#icon-colorpicker-color'
            ,color: '{if $info}{$info["color"]}{/if}'
            ,format: 'rgb'
            ,predefine: true
            ,alpha: true
            ,done: function(color){
                $('#icon-colorpicker-all-input').val(color); //向隐藏域赋值
                layer.tips('给图标设置了颜色值：'+ color, this.elem);

                color || this.change(color); //清空时执行 change
            }
            ,change: function(color){

            }
        });
    });
</script>
{/block}